<template>
	<view class="product">

		<view class="product_tab">
			<scroll-view scroll-x="true">
				<view class="flex_center">
					<view class="product_tab_item flex_r_around" v-for="(item,index) in store_tab_nav" :key="index"
						:id="tab_nav_id == item.id ? 'select' : ''" @click="onTabNav(item)">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="flex_r_between shark" style="padding-bottom: 110rpx;">
			<view class="item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
				<image :src="item.goods_image[0]" mode="aspectFill"></image>
				<view class="name hidden">
					{{ item.name }}
				</view>
				<view class="price flex_r_between">
					<text class="price_text">
						¥{{ item.price }}
					</text>
					<text class="order_text">
						售出 {{item.order_num}}
					</text>
				</view>
				<view class="status" v-if="item.status != 2">
					{{item.status == 1 ? '审核中' : '审核失败'}}
				</view>
			</view>
			<empty v-if="!list.length"></empty>
		</view>

		<view class="btn flex_r_around" @click="toAdd">
			<view class="flex_center">
				<uni-icons type="plusempty" color="#FFF" size="24"></uni-icons>
				<text>添加产品</text>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			empty
		},
		data() {
			return {
				list: [],
				total: 0,
				page: 1,

				store_tab_nav: [],
				tab_nav_id: 0,
			}
		},
		methods: {
			getList() {
				this.$get('/store_goods/getStoreGoodsList', {
					'store_id': 29,
					"page": this.page,
					tab_nav_id: this.tab_nav_id
				}).then(res => {
					this.total = res.data.total;
					res.data.data.forEach((e) => {
						this.list.push(e)
					});
					uni.stopPullDownRefresh();
				})
			},

			getMore() {
				if (this.total > this.list.length) {
					this.page++;
					this.getList();
				}
			},

			refresh() {
				this.page = 1;
				this.list = [];
				this.getList();
			},

			toDetail(item) {
				uni.navigateTo({
					url: `/pages/store/product/productDetail?id=${item.id}`
				})
			},

			toAdd() {
				uni.navigateTo({
					url: '/pages/store/product/productAdd'
				})
			},

			getStoreTabNav() {
				this.$post('/store_goods/getStoreTabNav').then(res => {
					this.store_tab_nav = res.data;
					if (this.store_tab_nav.length) {
						this.tab_nav_id = this.store_tab_nav[0].id;
						this.getList();
					}
				})
			},

			onTabNav(item) {
				if(this.tab_nav_id == item.id){
					return;
				}
				this.tab_nav_id = item.id;
				this.refresh();
			},
		},
		created() {
			this.getStoreTabNav();
		},
	}
</script>

<style lang="less" scoped>
	.product {
		padding: 0 32rpx 40rpx;
	}

	.item {
		width: 336rpx;
		height: 464rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;
		margin-bottom: 14rpx;
		position: relative;

		image {
			width: 336rpx;
			height: 336rpx;
			background: #D8D8D8;
		}

		.name {
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #131313;
		}

		.price {
			padding: 0 24rpx;

			.price_text {
				font-weight: 600;
				font-size: 36rpx;
				color: #FD2A53;
			}

			.order_text {
				font-size: 24rpx;
				color: #999999;
			}

		}

		.status {
			width: 144rpx;
			height: 52rpx;
			background: #333333;
			border-radius: 24rpx 0rpx 24rpx 0rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 52rpx;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
	}

	.btn {
		width: 686rpx;
		height: 100rpx;
		background: #FD2A53;
		border-radius: 50rpx;
		border: 2rpx solid #FD2A53;
		position: fixed;
		bottom: 30rpx;
		z-index: 60;

		text {
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	.product_tab {
		overflow: hidden;
		margin-bottom: 40rpx;

		scroll-view {
			width: 100%;
		}

		#select {
			border: 2rpx solid #FD2A53;
			background: #FFEAEE;

			text {
				color: #FD2A53;
			}
		}

		.product_tab_item {
			padding: 0 24rpx;
			height: 56rpx;
			background: #FFFFFF;
			border: 2rpx solid #FFFFFF;
			border-radius: 12rpx;
			margin-right: 16rpx;
			flex-shrink: 0;

			text {
				font-size: 24rpx;
				color: #131313;
				line-height: 34rpx;
			}
		}
	}
</style>